<!--
 * @Author: ChunLai
 * @Date: 2022-04-12 16:15:10
 * @LastEditTime: 2025-09-05 08:54:40
 * @Description: 万能账户关联订单
 * @FilePath: \02.bldinsure\src\views\omnipotent\pages\Common.vue
-->
<template>
  <div class="associte-page">
    <div class="relate-order-module pd14 bg-fff">
      <div class="md3-1">
        <div class="txt-div">
          投保人及被保险人是否同意将红利及生存利益转入万能险账户。(生存利益包括但不限于年金、生存保险金、养老保险金、满期保险金等以被保险人生存为给付条件的保险金。)
        </div>
        <div class="btn-span">
          <span
            v-for="(item, index) in yesNoCheckList"
            :key="`relate${index}`"
            @click="clickHandle(item.value)"
            :class="{ actived: item.value == isRelate }"
          >
            {{ item.label }}
          </span>
        </div>
      </div>
      <div class="md3-2" v-if="isRelate == '1'">
        <p>请查询并确认指定转入的万能险投保单号码</p>
        <p class="p2">(若该指定投保单未生效,则本约定无效)</p>
        <div class="flex-lr mt10 btn-txt">
          <div class="order-num">{{ formData.orderNum }}</div>
          <div class="pop-btn" @click="openSearch">查询</div>
        </div>
      </div>
    </div>
    <div class="mode_box" v-if="relateHtml">
      <div class="notice" v-html="relateHtml"></div>
    </div>
    <div class="mode_box" v-show="isRelate == '1'">
      <div class="notice">
        【温馨提示】
        <p class="mt10">1、点击"查询"按钮,弹出"万能账户查询"搜索页</p>
        <p>2、搜索框输入投保人姓名,点击"搜索"按钮,选择并确认需要关联的保单</p>
        <p>
          3、选择关联账号时,请仔细<b>核对投保信息(姓名/身份证号等)是否一致</b>
        </p>
        <p>
          4、关联的保单，投被保险人需要保持一致<b
            >(投保信息页面,不可再次修改相关信息)</b
          >
        </p>
        <p>5、请仔细阅读并确认以上注意事项,以免影响后续投保流程</p>
      </div>
    </div>
    <van-popup v-model="showPop" position="bottom" :style="{ height: '100%' }">
      <div class="user-list-wrap">
        <div class="top-wrap">
          <div class="title">万能账户查询</div>
          <!-- 搜索 -->
          <div class="search-wrap">
            <span class="ms_btn cancel" @click="closePop">取消</span>
            <input
              type="text"
              v-model="searchText"
              placeholder="请输入用户姓名"
            />
            <span class="ms_btn search" @click="searchUser">搜索</span>
          </div>
        </div>
        <!-- 用户列表 -->
        <div class="user-list">
          <div
            class="user-unit"
            v-for="(item, idx) in userList"
            :key="idx"
            @click="checkItem(item)"
          >
            <div class="name">投保人：{{ item.applicantName }}</div>
            <div class="id-num">
              <span>身份证号：</span>
              <span>{{ item.applicantIdNo | idNumFormat }}</span>
            </div>
            <!-- 万能险保单号 -->
            <div class="id-num">
              <span>关联投保单号：</span>
              <span>{{ item.orderNum }}</span>
            </div>
            <MsImgIcon
              size="16"
              name="checked"
              class="choosed-icon"
              v-if="item.serialNumber === formData.serialNumber"
            />
          </div>
        </div>
        <div class="sure_btn_box" @click="confirmSelect">确认</div>
      </div>
    </van-popup>
    <FooterBtns btnNum="1" rightText="确定" @saveForm="nextStep" />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import consts from "@/config/const.js";

export default {
  name: "CommonAssociation",
  data() {
    return {
      isRelate: "0",
      showPop: false,
      searchText: "",
      formData: {
        varietyCode: "",
        orderNum: "",
        workNum: "",
        serialNumber: "",
        applicantName: "",
      },
      userList: [],
    };
  },
  computed: {
    ...mapGetters({
      yesNoCheckList: "dictionary/yesNoCheckList",
    }),
    omnipRule() {
      let res = [];
      const cache = this.$getMessage("vuex") || {};
      if (cache.page) {
        res = cache.page.omnipotentRuleDesc || [];
      }
      return res;
    },
    relateRiskCode() {
      let res = "";
      const fdObj = this.omnipRule.find((ele) =>
        ele.riskCode.includes(this.mainRiskCode)
      );
      if (fdObj && fdObj.relateRisk) {
        res = fdObj.relateRisk;
      }
      return res;
    },
    relateHtml() {
      let res = "";
      const fdObj = this.omnipRule.find((ele) =>
        ele.riskCode.includes(this.mainRiskCode)
      );
      if (fdObj && fdObj.desc) {
        res = fdObj.desc;
      }
      return res;
    },
  },
  filters: {
    idNumFormat: function (val) {
      let resVal = val
        .replace(/\D/g, "")
        .replace(/(\d{6})(\d{8})(?=\d)/g, "$1 **** ");
      return resVal;
    },
  },
  created() {
    const relateBill = this.$getMessage("relaDatas");
    if (relateBill && relateBill.serialNumber) {
      Object.assign(this.formData, relateBill);
      this.clickHandle("1");
    }
  },
  methods: {
    clickHandle(val) {
      this.isRelate = val;
      if (val != "1") {
        this.formData.orderNum = "";
      }
    },
    openSearch() {
      this.showPop = true;
      if (this.formData.applicantName) {
        this.searchText = this.formData.applicantName;
        this.searchUser();
      }
    },
    searchUser() {
      if (!this.searchText) {
        return this.$toast("请输入投保人姓名");
      }
      this.userList = [];
      let params = {
        ...this.apiComParams,
        appntName: this.searchText,
        riskCode: this.relateRiskCode, //可关联的险种编码
      };
      this.$store
        .dispatch("apis/comAdminApiRequest", {
          apiParams: params,
          apiName: "getOrderListByStaff",
        })
        .then((data) => {
          if (data.code == "1") {
            if (data.list.length > 0) {
              this.userList = data.list;
            }
          } else {
            this.$toast("暂未查询到相关的万能账户,请确认信息是否正确");
          }
        });
    },
    checkItem(valObj) {
      this.formData.varietyCode = valObj.varietyCode;
      this.formData.workNum = valObj.worknum;
      this.formData.orderNum = valObj.orderNum;
      this.formData.serialNumber = valObj.serialNumber;
      this.formData.applicantName = valObj.applicantName;
    },
    // 确定选择
    confirmSelect() {
      if (this.formData.orderNum === "") {
        this.$msAlert("请选择需要关联的投保订单");
        return false;
      }
      this.closePop();
    },
    closePop() {
      this.showPop = false;
    },
    nextStep() {
      if (this.isRelate == "1") {
        if (!this.formData.serialNumber) {
          this.$toast("请选择需要关联的保单");
          return;
        }
        const relateBill = this.$getMessage("relaDatas") || {},
          cache_num = relateBill.serialNumber || "";
        if (cache_num == this.formData.serialNumber) {
          this.$router.push("/form");
        } else {
          this.getReBackBill();
        }
      } else {
        // sessionStorage.removeItem('relaDatas');
        this.$setMessage("relaDatas", {});
        this.$router.push("/form");
      }
    },
    getReBackBill() {
      let params = {
        comCode: "minsheng",
        workNum: this.formData.workNum,
        orderNum: this.formData.orderNum,
        mainRiskCode: this.formData.varietyCode,
      };
      if (this.formData.productCode) {
        params.productCode = this.formData.productCode;
      }
      this.$store.commit("updateLoad", true);
      this.$store
        .dispatch("apis/getBillDetails", params)
        .then((data) => {
          this.$store.commit("updateLoad", false);
          if (data.code == "1") {
            this.$setMessage("relaDatas", this.formData);
            let { appnt, cont, insureds } = data;
            if (appnt) {
              this.$store.commit(
                "insert/UPDATE_APPLICANT",
                consts.delNull(appnt)
              );
            }
            if (cont) {
              this.$store.commit("insert/UPDATE_PAYINFO", consts.delNull(cont));
            }
            if (insureds) {
              this.$store.dispatch("insert/apiRebackBbrSyr", insureds);
            }
            this.$router.push("/form");
          } else {
            this.$msAlert(data.msg);
          }
        })
        .catch(() => {
          this.$store.commit("updateLoad", false);
        });
    },
  },
};
</script>

<style lang="less" scoped>
@border-bottom: 1px solid #e6e6e6;
.associte-page {
  padding-bottom: 20px;
}

.mode_box {
  padding: 0 10px;
  margin-top: 10px;
  .notice {
    padding: 14px 10px;
    background-color: #fff;
    border-radius: 10px;
    p {
      text-indent: 1em;
      font-size: 14px;
      line-height: 1.5;

      b {
        color: #da251e;
      }
    }
  }
}
.md3-1 {
  display: flex;
  align-items: center;

  .btn-span {
    display: flex;
    justify-content: flex-end;
    padding-left: 20px;

    span {
      display: block;
      width: 28px;
      height: 28px;
      line-height: 26px;
      border-radius: 100%;
      text-align: center;
      border: 1px solid #999;
      color: #999;

      &:not(:last-child) {
        margin-right: 8px;
      }

      &.actived {
        color: red;
        border: 1px solid red;
        background-color: rgba(251, 140, 137, 0.1);
      }
    }
  }
}

.md3-2 {
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px solid #d6d3d3;
  .p2 {
    color: #999;
  }
}

.btn-txt {
  width: 100%;
}

.order-num {
  width: calc(100% - 70px);
  height: 26px;
  border-bottom: 1px solid #efefef;
}

.pop-btn {
  width: 50px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
  background-color: #ee0a24;
}
.user-list-wrap {
  background: #e7e7e7;
  height: 100%;
  .top-wrap {
    width: 100%;
    background: #ffffff;
    border-bottom: 10px solid #e7e7e7;

    .title {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      text-align: center;
      background: #ffffff;
    }

    .search-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      background: #ffffff;
      padding: 0 12px;
      border-top: @border-bottom;

      input {
        width: calc(100% - 110px);
        height: 30px;
        padding: 0 15px;
        outline: none;
        border-radius: 20px;
        border: @border-bottom;
        background: #f8f8f8;
      }
      .ms_btn {
        width: 40px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        font-size: 12px;

        border-radius: 4px;
        &.cancel {
          color: #999;
          border: 1px solid #999;
        }
        &.search {
          color: #ee0a24;
          border: 1px solid #ee0a24;
        }
      }
    }
  }

  .user-list {
    height: calc(100% - 150px);
    background: #ffffff;
    overflow: hidden;
    overflow-y: scroll;
    border-bottom: 10px solid #e7e7e7;
    .user-unit {
      border-bottom: @border-bottom;
      padding: 12px;
      position: relative;

      .name {
        font-weight: 600;
        font-size: 14px;
      }

      .id-num {
        color: #999999;
        font-size: 14px;
        line-height: 20px;
      }

      .choosed-icon {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 14px;
        margin: auto;
      }
    }
  }

  .sure_btn_box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: #da251e;

    font-size: 16px;
    letter-spacing: 4px;
    color: #fff;
  }
}
</style>
